<template>
	<el-card>
		<div slot="header">
			<span>评论列表</span>
		</div>
		<el-table :data="tableData" style="width: 100%">
			<el-table-column label="#" prop="comment_id" width="30">
			</el-table-column>
			<el-table-column prop="article_title" label="文章标题" width="390">
			</el-table-column>
			<el-table-column prop="user_nickname" label="用户">
			</el-table-column>
			<el-table-column prop="content" label="留言内容">
			</el-table-column>
			<el-table-column prop="is_visible" label="状态">
				<template slot-scope="scope">
					<el-tag v-if="scope.row.is_visible === 1" type="success">正常</el-tag>
					<el-tag v-if="scope.row.is_visible === -1" type="warning">禁用</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="reply" label="回复内容">
			</el-table-column>
			<el-table-column prop="reply_time" label="回复日期">
			</el-table-column>
			<el-table-column prop="create_time" label="留言日期">
			</el-table-column>
			<el-table-column label="操作" width="180">
				<template slot-scope="scope">
					<el-button v-permission="'article:comment:reply'" icon="el-icon-edit" @click="openDialog(scope.row)">回复</el-button>
					<el-button v-permission="'article:comment:switch'" type="danger" @click="handleChange(scope.row.is_visible, scope.row.comment_id, scope.$index)"
						icon="el-icon-delete">{{ scope.row.is_visible === 1 ? '隐藏' : '显示' }}</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-dialog title="回复评论" :visible.sync="dialog_visible" @close="handleCloseDialog('form')">
			<el-descriptions direction="vertical" :column="2" border>
				<el-descriptions-item label="评价用户">{{current_reply.user_nickname}}</el-descriptions-item>
				<el-descriptions-item label="评论文章">{{ current_reply.article_title }}</el-descriptions-item>
				<el-descriptions-item label="评价内容">{{ current_reply.content }}</el-descriptions-item>
			</el-descriptions>
			<el-form :model="form" ref="form" status-icon label-width="100px">
				<el-form-item prop="reply">
					<textarea v-model="form.reply" cols="70" rows="10"></textarea>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialog_visible = false">取 消</el-button>
				<el-button type="primary" @click="handleReply">添 加</el-button>
			</span>
		</el-dialog>
	</el-card>
</template>

<script>
import { Comment } from '@/api';
export default {
	name:'list',
	data() {
		return {
			tableData: [],
			dialog_visible:false,
			current_reply:[],
			form:{
				reply:'',
				comment_id:'',
			},
		}
	},
	created() {
		this.loadList();
	},
	methods: {
		// 加载列表
		async loadList() {
			let { status, msg, data } = await Comment.recent({ pagesize: 20 });
			if (status) {
				this.tableData = data;
			}
		},
		handleChange(is_visible, comment_id, index) {
			if (is_visible === 1) {
				this.$confirm('此操作将禁用该标签, 是否继续?', '确认', { type: 'warning' })
					.then(async () => {
						let not_visible = -is_visible;
						let { status, msg } = await Comment.visible({ comment_id, visible: not_visible });
						if (status) {
							this.tableData[index].is_visible = not_visible;
							this.$message.success(msg);
						} else {
							this.$message.error(msg);
						}
					})
			}
			if (is_visible === -1) {
				this.$confirm('此操作将启用该标签, 是否继续?', '确认', { type: 'warning' })
					.then(async () => {
						let not_visible = -is_visible;
						let { status, msg } = await Comment.visible({ comment_id, visible: not_visible });
						if (status) {
							this.tableData[index].is_visible = not_visible;
							this.$message.success(msg);
						} else {
							this.$message.error(msg);
						}
					})
			}
		},
		openDialog(reply) {
			//缓存
			this.current_reply = reply;
			this.form={...reply};
			//打开弹窗
			this.dialog_visible = true;
		},
		async handleReply() {
			let { comment_id, reply } = this.form;
			try {
				let valid = await this.$refs.form.validate();
				if (valid) {
					let { status, msg } = await Comment.reply({ comment_id, reply });
					if (status) {
						// 操作DOM
						Object.assign(this.current_reply, this.form);
						// 关闭弹窗
						this.dialog_visible = false;
						// 信息提示
						this.$message.success(msg);
					} else {
						// 信息提示
						this.$message.error(msg);
					}
				}
			} catch (error) {
				console.log(error);
			}
		},
		handleCloseDialog(resetForm) {
            // 清除表单验证状态
            this.$refs[resetForm].resetFields();
        },
	},
}
</script>

<style></style>
